/*
 * @Author: luoqi
 * @Date: 2022-03-28 12:47:30
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-19 20:55:44
 * @Description: 
 */
import React,{useState,useEffect} from 'react';
import {Tabs} from 'antd';
import tabs  from '../tabs';
import './style.css'

import {connect} from 'react-redux'
import {delTab,changeActive} from '../../store/tabAction'
import {getTypeListAsync} from '../../store/preTypeAction'
const { TabPane } = Tabs;


const Mycontent = (props) => {
  let [h,setH]=useState(0)
    //获取所有一级分类
  useEffect(()=>{
    props.getTypeListAsync();
    // window.onresize=function(){
    //   setH(window.innerHeight-105+'px')
    // }
  },[])
  function onEdit(targetKey, action){
    console.log(targetKey,action);
    //删除标签
    if(action=='remove'){
      props.delTab(targetKey)
      console.log(props.tabs);
      props.changeActive(props.tabs.panes[props.tabs.panes.length-1].key)
    }
  }
  return (
    <Tabs
      hideAdd
      onChange={props.changeActive}
      activeKey={props.tabs.activeKey}
      type="editable-card"
      onEdit={onEdit}
    >
      {props.tabs.panes.map(pane => (
        <TabPane tab={pane.name} key={pane.key} className="tab-content tab-scroll"  style={{height:window.innerHeight-105+'px'}}>
          {tabs[pane.key].content}
        </TabPane>
      ))}
    </Tabs>
  );
}

//返回容器组件
export default connect(
  state=>({tabs:state.tabs}),
  {delTab,changeActive,getTypeListAsync}
)(Mycontent);
